<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-20 11:58:48
 * @LastEditTime: 2019-10-20 13:47:11
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>SNIEC答谢会邀请函</title>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
		/>
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- <link href="https://cdn.bootcss.com/fullPage.js/3.0.7/fullpage.min.css" rel="stylesheet"> -->
		<link
			href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css"
			rel="stylesheet"
		/>
		<link
			href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css"
			rel="stylesheet"
		/>
		<link
			href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css"
			rel="stylesheet"
		/>
		<style>
			@font-face {
				font-family: 'iconfont'; /* project id 1449699 */
				src: url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.eot');
				src: url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.eot?#iefix')
						format('embedded-opentype'),
					url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.woff2')
						format('woff2'),
					url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.woff')
						format('woff'),
					url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.ttf')
						format('truetype'),
					url('http://at.alicdn.com/t/font_1449699_ndr14l18x3.svg#iconfont')
						format('svg');
			}
			.iconfont {
				font-family: 'iconfont' !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
			}
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-touch-callout: none;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				position: relative;
				background: #eee;
				font-size: 14px;
				-webkit-overflow-scrolling: touch;
				overflow: hidden;
			}

			.content {
				height: 100%;
				overflow-y: auto;
				padding: 10% 15% 10%;
			}

			.page-view {
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.page-two {
				background-image: url('http://static.yudada.com/web/img/1.jpeg');
				background-position: center;
				background-size: cover;
				color: #fff;
				z-index: 10;
			}

			.form-item,
			.form-select {
				display: block;
			}

			.form-item i {
				font-style: normal;
			}
			.form-item {
				padding-bottom: 10px;
				min-height: 50px;
			}
			.form-item input {
				padding: 5px;
				font-size: 18px;
				line-height: 30px;
				height: 40px;
				outline: none;
				width: 100%;
				display: block;
				caret-color: rgba(0, 0, 0, 0);
			}

			.form-select select {
				line-height: 35px;
				height: 35px;
				width: 100%;
				background: #bbb;
				font-size: 18px;
				color: #fff;
				outline: none;
				border: none;
			}

			.footer {
				padding-top: 10px;
				font-size: 14px;
			}

			.footer .text {
				margin-bottom: 10px;
			}

			.submit-btn {
				width: 100%;
				left: 25%;
				transition: all 0.8s ease;
				line-height: 50px;
				height: 50px;
				text-align: center;
				font-size: 18px;
				background: #012967;
				color: #fff;
				border-radius: 8px;
				margin-top: 20px;
			}

			.submit-btn.active {
				background: #183664;
			}

			.page-view img {
				width: 100%;
			}

			.page-1 {
				background-image: url('http://static.yudada.com/web/img/test/y1.jpeg');
			}

			.page-2 {
				background-image: url('http://static.yudada.com/web/img/test/y2.jpeg');
			}

			.page-3 {
				background-image: url('http://static.yudada.com/web/img/test/1.jpeg');
			}

			.page-4 {
				background-image: url('http://static.yudada.com/web/img/test/y3.jpeg');
			}

			.jconfirm .jconfirm-holder {
				width: 65%;
				margin: auto;
			}

			[contenteditable='true'],
			input,
			textarea {
				-webkit-user-select: text;
			}

			.item-label {
				line-height: 1.2;
				display: block;
			}
			.swiper-container {
				--swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
				--swiper-navigation-size: 30px; /* 设置按钮大小 */
			}
			.icon-up {
				font-size: 35px;
				position: absolute;
				left: 50%;
				margin-left: -17px;
				color: #d9c9a5;
				bottom: 10px;
				animation: mymove 1.5s infinite;
				-webkit-animation: mymove 1.5s infinite;
				transition: all 0.2s ease;
			}
			@keyframes mymove {
				0% {
					bottom: 10px;
					opacity: 0.5;
				}
				50% {
					bottom: 18px;
					opacity: 0.75;
				}
				100% {
					bottom: 25px;
					opacity: 1;
				}
			}
			@-webkit-keyframes mymove {
				0% {
					bottom: 10px;
					opacity: 0.5;
				}
				50% {
					bottom: 18px;
					opacity: 0.75;
				}
				100% {
					bottom: 25px;
					opacity: 1;
				}
			}
			.hide-page {
				display: none;
			}
			.jconfirm-buttons .btn {
				font-size: 10px;
				font-weight: lighter;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container" id="fullpage" style="height: 100%">
			<div class="swiper-wrapper" style="height: 100%">
				<div class="swiper-slide page-view page-1">
					<i class="iconfont icon-up">&#xe63b;</i>
				</div>

				<div class="swiper-slide page-view page-2">
					<i class="iconfont icon-up">&#xe63b;</i>
				</div>

				<div class="swiper-slide page-view page-4">
					<i class="iconfont icon-up">&#xe63b;</i>
				</div>

				<div class="swiper-slide page page-two">
					<div class="content ios-page">
						<div class="title">请填写(Please fill in)</div>
						<label class="form-item" for="input-company">
							<div class="item-label">公司(COMPANY)</div>
							<input type="text" class="input-company" id="input-company" />
						</label>

						<label class="form-item" for="input-name">
							<div class="item-label">
								<i class="user-name-label">姓名</i>(YOUR NAME)
							</div>
							<input type="text" class="input-name" id="input-name" />
						</label>

						<label class="form-item" for="nput-phone">
							<div class="item-label">
								<i class="user-phone-label">手机号</i>(YOUR PHONE NUMBER)
							</div>
							<input type="tel" class="input-phone" id="input-phone" />
						</label>

						<div class="form-select">
							<div class="item-label">请选择标注(PLEASE TICK)</div>
							<select name="select-label" id="select-label">
								<option value="1">我将亲自出席（I will be present）</option>
								<option value="2"
									>很遗憾，我无法出席（I regret that i won't present）</option
								>
								<option value="3"
									>很遗憾我无法亲自出席，将派代表出席（I personaly won't be
									present but a representative be sent）</option
								>
							</select>
						</div>

						<label
							class="form-item representative-name"
							for="input-representative-name"
						>
							<div class="item-label">代表姓名(The representative's name)</div>
							<input
								type="text"
								class="input-representative-name"
								id="input-representative-name"
							/>
						</label>

						<div class="submit-btn">提交(submit)</div>
					</div>
				</div>
				<!-- <audio
					src="http://static.yudada.com/web/img/test.mp3"
					autoplay
					loop
					preload
					style="display: none;"
					id="music"
				></audio> -->
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script>
			$(function() {
				var img = $('<img scr="http://static.yudada.com/web/img/1.jpeg" />');
				var img = document.createElement('img');
				img.src = 'http://static.yudada.com/web/img/1.jpeg';
				img.onload = function() {
					init();
				};

				var u = navigator.userAgent;
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				var $btn = $('.submit-btn');
				var $company = $('.input-company');
				var $name = $('.input-name');
				var $select = $('#select-label');
				var $music = $('#music');
				var $rName = $('.representative-name');
				var $rNameInput = $('.input-representative-name');
				var $phone = $('.input-phone');
				$rName.hide();
				$btn.hide();
				var mySwiper;
				function init() {
					var index = 0;
					mySwiper = new Swiper('.swiper-container', {
						autoplay: false,
						direction: 'vertical',
						effect: 'cube',
						cubeEffect: {
							slideShadows: true,
							shadow: true,
							shadowOffset: 100,
							shadowScale: 0.6
						},
						on: {
							init: function() {
								setTimeout(function() {
									$btn.show();
								}, 3000);
							},
							touchStart: function() {},
							slideChangeTransitionStart: function() {
								if (isiOS && this.activeIndex == 3) {
									$('body').append('<b></b>');
									$('.page-two').css({
										transform:
											'rotateX(-270deg) rotateY(0deg) translate3d(-100%, -200%, 0px) scale(3)'
									});
									$('.swiper-cube-shadow').remove();
								}
							},
							touchMove: function() {
								if (isiOS && this.activeIndex == 3) {
									$('body').append('<b></b>');
									$('.page-two').css({
										transform:
											'rotateX(-270deg) rotateY(0deg) translate3d(-100%, -200%, 0px) scale(3)'
									});
									$('.swiper-cube-shadow').remove();
								}
							},
							touchEnd: function() {
								if (isiOS && this.activeIndex == 3) {
									$('body').append('<b></b>');
									$('.page-two').css({
										transform:
											'rotateX(-270deg) rotateY(0deg) translate3d(-100%, -200%, 0px) scale(3)'
									});
									$('.swiper-cube-shadow').remove();
								}
							},
							touchStart: function() {
								if (isiOS && this.activeIndex == 3) {
									$('body').append('<b></b>');
									$('.page-two').css({
										transform:
											'rotateX(-270deg) rotateY(0deg) translate3d(-100%, -200%, 0px) scale(3)'
									});
									$('.swiper-cube-shadow').remove();
								}
							},
							slideChangeTransitionEnd: function() {
								if (isiOS && this.activeIndex == 3) {
									$('body').append('<b></b>');
									$('.page-two').css({
										transform:
											'rotateX(-270deg) rotateY(0deg) translate3d(-100%, -200%, 0px) scale(3)'
									});
									$('.swiper-cube-shadow').remove();
								}
							}
						}
					});
				}

				//methods
				// myFullpage.setAllowScrolling(false);
				$select.change(function(v) {
					var val = $select[0].value;
					$rName[val == 3 ? 'show' : 'hide'](300);
				});

				$('window').resize(function() {
					mySwiper.slideTo(3, 0, false);
				});

				function checkData() {
					var err = '';
					if ($select[0].value == 3 && !$rNameInput.val()) {
						err = '请填写代表姓名~';
					}

					if (!$phone.val() || $phone.val().length !== 11) {
						err = '请填写正确的手机号~';
					}

					if (!$name.val()) {
						err = '请填写姓名~';
					}

					if (!$company.val()) {
						err = '请填写公司名称~';
					}
					return err;
				}

				$btn.click(function() {
					var err = checkData();
					$btn.addClass('active');
					setTimeout(() => {
						$btn.removeClass('active');
					}, 500);
					if (err || $btn.hasClass('send')) {
						$.dialog({
							title: '提示!',
							content: err || '提交中...请耐心等候！',
							columnClass: 'medium',
							boxWidth: '70%'
						});
						return;
					}
					$btn.addClass('send');
					$btn.text('提交中...');

					var data = {
						name: $name.val(),
						company_name: $company.val(),
						tick_type: $select.val(),
						phone: $phone.val()
					};
					$select.val() == 3 && (data.representative_name = $rNameInput.val());
					$.ajax({
						type: 'POST',
						url: 'http://simpure.org/api/user',
						data: data,
						dataType: 'json',
						success: function(res) {
							if (res.code != 1 && res.code != 2) {
								$.dialog({
									title: '提示!',
									content: res.message || '服务器忙，请稍后再试~',
									columnClass: 'medium',
									boxWidth: '70%'
								});
								return;
							}

							const content = `【SNIEC客户答谢会】尊敬的${data.representative_name || data.name || ''}（先生/女士）您已成功报名参加2019年11月21日上海新国际博览中心“思事源·善若水”客户答谢晚宴。感谢您的支持和鼓励，期待您的莅临！地址:中国上海浦东新区浦明路988号(上海鲁能JW万豪侯爵酒店)1楼荣爵厅`;
                            let smsUrl = `http://47.99.121.12:7862/sms?action=send&account=922118&password=MYF8z6&mobile=${data.phone}&content=${content}&extno=10690118&rt=json`
                            if (res.code == 1) {
								$.ajax(smsUrl, (smsRes, response, body) => {})
							}

							$.confirm({
								title: '签到二维码，长按可保存哦~',
								content: function() {
									var vm = this;
									setTimeout(() => {
										// vm.setContentAppend(
										// 	'<img style="min-height: 50px;" src="http://qr.liantu.com/api.php?text=http://simpure.org/api/sign/' +
										// 		res.data.id +
										// 		'" />'
										// );
										vm.setContentAppend(
											'<div>您已注册成功，期待您的光临</div><div>Registration Successful. Looking forward to your visit.</div>'
										);
										vm.setTitle('注册成功');
									}, 200);
								},
								columnClass: 'medium',
								boxWidth: '70%',
								buttons: {
									ok: {
										text: '再添加一位(Add one more)',
										btnClass: 'btn-primary',
										keys: ['enter'],
										action: function() {
											$name.val('');
											$phone.val('');
											$rNameInput.val('');
											$('.user-name-label').text('新参会者姓名');
											$('.user-phone-label').text('新参会者手机号');
										}
									},
									cancel: {
										text: '完成(Complete)',
										btnClass: 'btn-primary',
										keys: ['esc'],
										action: function() {}
									}
								}
							});
						},
						error: function(err) {
							console.log(err);
						},
						complete: function() {
							$btn.removeClass('send');
							$btn.text('提交(Complete submission)');
						}
					});
				});

				$.ajax({
						type: 'GET',
						url: 'http://simpure.org/api/wxconfig?url=' + encodeURIComponent(window.location.href),
						// data: data,
						dataType: 'json',
						success: function(res) {
							console.log(res)
							wx.config({
								appId: res.data.appid,
								timestamp: res.data.timestamp,
								nonceStr: res.data.nonceStr,
								signature: res.data.signature,
								jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
							});
							wx.ready(() => {
								console.log('wx ready')
								 // 分享给朋友
								 wx.onMenuShareAppMessage({
									title: 'SNIEC答谢会邀请函',
									// desc: '上海新国际博览中心客户答谢会~邀请函',
									link: location.href,
									imgUrl: 'http://static.yudada.com/web/img/test/logo.png',
									success: function () {
										$.confirm({
											title: '分享成功~',
											columnClass: 'medium',
											boxWidth: '70%'
										});
									}
								 });
								// 分享到朋友圈
								wx.onMenuShareTimeline({
									title: 'SNIEC答谢会邀请函',
									// desc: '上海新国际博览中心客户答谢会~邀请函',
									link: location.href,
									imgUrl: 'http://static.yudada.com/web/img/test/logo.png',
									success: function () {
										$.confirm({
											title: '分享成功~',
											columnClass: 'medium',
											boxWidth: '70%'
										});
									}
								 });
							});
							wx.error(function(res) {
							console.log('err', res);
						});
					},
					error: function(err) {
						console.log(err);
					}
				});

				// $('input').blur(function() {
				// 	setTimeout(function() {
				// 		var scrollHeight =
				// 			document.documentElement.scrollTop ||
				// 			document.body.scrollTop ||
				// 			0;
				// 		window.scrollTo(0, Math.max(scrollHeight - 1, 0));
				// 		mySwiper.slideTo(3, 0, false);
				// 	}, 100);
				// });
			});
		</script>
	</body>
</html>
